<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度新闻导航栏</title>
    <script src="../static/jquery-3.5.1.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        #topTitle{
            position: relative;
            width: 100%;
            height: 36px;
            background-color: #01204F;
            color: #fff;
            line-height: 36px;
        }
        #topTitle ul{
            position: absolute;
            top: 0;
            left: 300px;
            z-index: 4;
        }
        #topTitle ul li{
            float: left;
            padding: 0 10px;
            background-color: transparent;
        }
        #slider{
            position: absolute;
            top: 0;
            width: 10px;
            height: 36px;
            background-color: #CC0000;
        }
        #topTitle ul .active{
            background-color: #CC0000;
        }
    </style>
    
</head>
<body>
    <nav id="topTitle">
        <!-- 滑块 -->
        <div id="slider"></div>
        <ul>
            <li class="active" index='0'>首页</li>
            <li index='1'>国内</li>
            <li index='2'>国际</li>
            <li index='3'>军事</li>
            <li index='4'>财经</li>
            <li index='5'>娱乐</li>
            <li index='6'>体育</li>
            <li index='7'>互联网</li>
            <li index='8'>科技</li>
            <li index='9'>游戏</li>
            <li index='10'>女人</li>
            <li index='11'>汽车</li>
            <li index='12'>房产</li>
        </ul>
    </nav>
    <div style="padding-left: 30px;margin-top: 20px;">
        参考：<a href="http://news.baidu.com/"  target="_blank" style="text-decoration: none;">http://news.baidu.com/</a>
    </div>
    <script>
        var n = 0;
        var intoleft = 300;
        // 初始化滑块
        setSliderLeft(0);
        // 鼠标点击
        $("#topTitle ul li").click(function(e) {
            $("#topTitle ul li").removeClass('active');
            $(this).addClass('active');
            // 事件触发鼠标距离文档左边距离
            var D_left = e.pageX;
            // 事件距离元素左边距离
            var I_left = e.offsetX;
            var conLeft = D_left-I_left;
            // 点击了元素设置滑块应该距离左边的距离更新
            intoleft = conLeft;
            // 更新n值
            n = Number(this.attributes['index']['value'])
        })
        // 鼠标移入
        $("#topTitle ul li").mouseenter(function(e) {
            setAnimate(e);
        })
        // 鼠标移出
        $("#topTitle ul li").mouseleave(function() {
            setSliderLeft();
        })
        // 根据传入的数字（li的index），判断滑块应该距离左边距离
        function setSliderLeft() {
            var conWidth = $("#topTitle ul li").eq(n)[0].clientWidth;
            $("#slider").stop().animate({"left":intoleft,"width":conWidth}, 500);
        }
        // 设置动画：e:事件元素
        function setAnimate(e) {
            var conWidth = e.target.clientWidth;
            // 事件触发鼠标距离文档左边距离
            var D_left = e.pageX;
            // 事件距离元素左边距离
            var I_left = e.offsetX;
            var conLeft = D_left-I_left;
            $("#slider").stop().animate({"left":conLeft,"width":conWidth}, 500);
        }
    </script>
</body>
</html>